<template>
<div class="heiheihei" ref="heiheihei">
<input type="text" v-model="msg">
<div class="content" @mousedown="onContentDrag" @dragend="onContentDragEnd" draggable="true" ref="content">
<span v-if="msg">{{msg}}</span>
<span v-else>no content</span>
</div>
<span ref="span">123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123121231231231231231231231231231231231231231231231231231231231231233123123123123123123123123123123123123</span>
</div>
</template>

<script>
/**
 * 1、事件(明确函数引用) 和 watch的卸载
 * 2、事件 拦截
 * 3、getBoundingClientRect offsetTop/offsetLeft clientWidth/clientHeight
 * getBoundingClientRect 视口 坐标系
 * 4、可移动区域的确定
 *
 * 滚动偏移量：
 * (1) pageOffsetX/pageOffsetY
 * (2) scrollTop/scrollLeft (怪异模式下从 body获取 其余从 documentElement)
 *
 *
 */

/**
 *    o -----------------X----------------------->
 *    |                    ∧               文档坐标系
 *    |                    |                      |
 *    |                   (2)                     |
 *    |                    |                      |
 *    Y                    ∨                      |
 *    |            o ---------X--------------->   |
 *    |            |                    视口坐标系  |
 *    |            |                           |  |
 *    |            Y     -----                 |  |
 *    |  <- (1) -> |    | DIV |                |  |
 *    |            |     -----                 |  |
 *    |            |                           |  |
 *    |            |                           |  |
 *    |            ∨                           |  |
 *    ∨             ---------------------------   |
 *     -------------------------------------------
 */

export default {
  name: 'test',
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    onContentDrag(e) {
      // console.log(e.target.getBoundingClientRect())
    },
    onContentDragEnd(e) {
      // console.log(e.target.getBoundingClientRect())
    },
    windowResize() {
      // console.log('heihei')
    }
  },
  mounted() {
    // console.log(this.$refs)
    window.addEventListener('resize', this.windowResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.windowResize)
  }
}
</script>

<style scoped>
.heiheihei {
  /* margin-top: 100px; */
  padding-top: 100px;
  height: 400px;
  width: 700px;
  background-color: aqua;
}

.content {
  position: absolute;
  /* right: 10px; */
  border: 1px solid #ccc;
  background-color: rgba(222, 184, 135, 0.73);
}
</style>
